<template>
	<!-- 退费弹窗：课程退费、商品退费、订金退费 -->
	<div class="refundpopup_result">
		<el-dialog 
			:title="parentData.title"
			:visible.sync="parentData.show"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			:modal="false"
			element-loading-background="rgba(0, 0, 0, 0.1)">
			<div class="row">
				<div class="txtbox">
					<span class="label">学员姓名：</span>
					<span class="value">{{parentData.studentInfo.studentName}}</span>
				</div>
				<div class="txtbox">
					<span class="label">联系人：</span>
					<span class="value">{{parentData.studentInfo.parentName}}</span>
				</div>
				<div class="txtbox">
					<span class="label">联系电话：</span>
					<span class="value">{{parentData.studentInfo.phone}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox">
					<span class="label">收款人：</span>
					<span class="value">{{parentData.studentInfo.payee}}</span>
				</div>
				<div class="txtbox">
					<span class="label">收款人电话：</span>
					<span class="value">{{parentData.studentInfo.payeePhone}}</span>
				</div>
			</div>
			<div class="row table">
				<span class="title">退费详情：</span>
				<div class="table" style="width:100%;">
					<template >
						<el-table
							:data="parentData.tableResult.table.tbody"
							border
							style="width: 100%;font-size:0.16rem;">
							<el-table-column 
								align="center"
								v-for="row in parentData.tableResult.table.thead"
								:key="row.propName"
								:prop="row.propName"
								:label="row.labelNmae"
								:width="row.width">
							</el-table-column>
						</el-table>
					</template>
				</div>
				<div class="statisticsBox">
					<div class="txtbox">
						<span class="label">应退总计：</span>
						<span class="value">{{parentData.shouldRefund}}</span>
					</div>
					<div class="txtbox">
						<span class="label">实际退款：</span>
						<span class="value">{{parentData.actualRefund}}</span>
					</div>
					<div class="txtbox" v-if="parentData.alterByUser">
						<!--<span class="label alterByUser">手动修改退款价格</span>-->
					</div>
				</div>
			</div>
			<div class="row button">
				<el-button class="cancel resetElement" type="primary" @click="cancel">返回办理台</el-button>
				<el-button class="print resetElement" type="primary" disabled>打印退费凭条</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		props:['refundpopup_result'],
		data(){
			return {
				parentData:this.refundpopup_result
			}
		},
		methods:{
			/**初始化*/
			init(data){
			},
			updateByData(data){
				this.parentData=data;
			},
			/**接口获取数据 */
			api_getDataByParam(param){

			},
			cancel(){
				console.log(this.parentData)
				this.parentData.show=false;
			},
		},
		computed:{
			
		},
		created : function() {
		}
	}
</script>

<style lang="scss">
	.refundpopup_result{
		padding: 0 0.34rem 0.2rem 0.34rem;
		font-size: 0.16rem;
		.row{
			width: 100%;
			display: flex;
    		margin-top: 0.1rem;
			.title{
				font-size: 0.16rem;
				margin-bottom: 0.05rem;
			}
			.otherinfo{
			}
			.txtbox{
				width: 22%;
				.label{

				}
				.value{

				}
			}
			.table{
				.el-table{
					// max-height: 3.5rem !important;
					// .el-table__body-wrapper{
					// 	max-height: 3.02rem !important;
					// }
				}
			}
			.statisticsBox{
				width: 100%;
				text-align: right;
				margin-top: 0.05rem;
				.txtbox{
					width: 100%;
					.label{

					}
					.alterByUser{
						font-size: 0.14rem;
					}
					.value{

					}
				}
			}
		}
		.row.table{
			flex-wrap: wrap;
		}
		.row.button{
			justify-content: center;
			.ok{
				margin-left: 1rem;
			}
		}
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
</style>